<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>搜索下拉测试</title>
    <link href="../public/stylesheets/jquery-ui-1.8.21.custom.css" rel="stylesheet">
    <script src="../public/javascripts/jquery-1.11.0.min.js"></script>
    <script src="../public/javascripts/jquery-ui-1.8.21.custom.min.js"></script>
    <style type="text/css">
        div{
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 200px;;
        }
        input{
            width: 400px;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }
        .ui-autocomplete-search {
            background-color: #EEEEEE;
            width: 400px;
            max-height: 450px;
            overflow-y: scroll;
            z-index: 10;
            padding-left: 10px;
            padding-top: 10px;
        }
        .ui-autocomplete li{
            height: 35px;
            color: #444444;
            font-size: 14px;
            line-height: 35px;
        }
        .ui-autocomplete li a:hover{
            background-color: deepskyblue;
            color: black;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div>
        <input type="text" id="search" placeholder="输入关键词">
    </div>
</body>
<script>
    $(function(){
        var dataSource = [
            {label:"得病不治会挂掉的"},{label:"得了鼻炎怎么治，还能治吗？"},{label:"今天不小心吃了颗钉子，会不会有事呢"},
            {label:"胃病怎么才能治疗好，要注意些啥"},{label:"你知道怎么预防癌症吗？"},{label:"头发掉了怎么办，，可以再长吗？"},
            {label:"得了肝病怎么办啊，哪里治疗效果好"},{label:"南京哪里口腔诊所好"},{label:"今天不小心吃了颗钉子，会不会有事呢"},
            {label:"得病不治会挂掉的"},{label:"得了鼻炎怎么治，还能治吗？"},{label:"今天不小心吃了颗钉子，会不会有事呢"},
        ];
        $('#search').focus(function(){
            if(dataSource.length>0){
                $('#search').autocomplete({
                    minLength: 0,
                    source: function( request, response ) {
                        response( $.ui.autocomplete.filter(
                                dataSource, request.term) );
                    },
                    select: function(event, ui) {
                        $('#search').val(ui.item.label);
                    }
                });
                var position = $('#search').offset();
                var width = $('#search').width();
                $(".ui-autocomplete").css({
                    "left":position.left+"px",
                    "top":position.top+36+"px"
                });
                $(".ui-autocomplete").addClass("ui-autocomplete-search");
            }
        });

        $('#search').focus(function(){
            $('#search').autocomplete('search','');
        });
        $(document.body).click(function(e){
            if(e.target.id!='search'){
                $('#search').autocomplete('close');
            }
        });

    });
</script>
</html>